<template>
  <div class="root-table">
    <div class="table-operations">
      <!-- <a-button @click="onAdd" v-if="hasAuthority(['*', 'product-add'])">添加</a-button> -->
      <!-- <a-button @click="onDels" v-if="hasAuthority(['*', 'product-del'])">删除</a-button> -->
      <a-button @click="onRefresh">刷新</a-button>
      <a-row type="flex">
        <a-col :span="6" :order="4"><a-input-search placeholder="请输入产品名称" @search="onSearchNameZn" enterButton /></a-col>
        <a-col :span="6" :order="3"></a-col>
        <a-col :span="6" :order="2"></a-col>
        <a-col :span="6" :order="1"></a-col>
      </a-row>
    </div>
    <a-table :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
    >

      <template slot="operation" slot-scope="text, record">
        <a @click="onEdit(record)" href="javascript:;" v-if="hasAuthority(['*', 'product-edit'])">编辑</a>
        <!-- <a @click="onDelete(record.id)" href="javascript:;" v-if="hasAuthority(['*', 'product-del'])">删除</a> -->
        <a @click="onProductResource(record)" href="javascript:;" v-if="hasAuthority(['*', 'product-resource'])">配置资源权限</a>
      </template>
    </a-table>
    <keep-alive>
    <product-add
      :title="title"
      :visible="visible"
      :record="record"
      @ok="handleOk"
      @cancel="handleCancel"/>
    </keep-alive>
    <keep-alive>
    <product-resource
      title="分配资源权限"
      :visible="visibleForResource"
      :record="record"
      @ok="handleOkForResource"
      @cancel="handleCancelForResource"/>
    </keep-alive>
  </div>
</template>
<script>
import Vue from 'vue'
import serv from './ProductService'
import productAdd from './ProductAdd'
import productResource from './ProductResource'
import { Button, Table, Col, Row, Input } from 'ant-design-vue'
Vue.component(Input.Search.name, Input.Search)
Vue.component(Row.name, Row)
Vue.component(Col.name, Col)
Vue.component(Table.name, Table)
Vue.component(Button.name, Button)
const columns = [{
  title: '产品名称',
  dataIndex: 'name',
  sorter: false,
  width: '10%'
}, {
  title: '产品代码',
  dataIndex: 'code',
  sorter: false,
  width: '10%'
}, {
  title: '图库用途',
  dataIndex: 'galleryUse',
  width: '6%',
  customRender: (text, record, index) => {
    return {1: '产品图库', 2: '备选图库', 3: '素材图库'}[record.galleryUse]
  }
}, {
  title: '可以试用',
  dataIndex: 'onProbation',
  width: '6%',
  customRender: (text, record, index) => {
    return record.onProbation ? '是' : '否'
  }
// }, {
//   title: '描述',
//   dataIndex: 'description',
//   sorter: false,
//   width: '10%'
}, {
  title: '每天搜图免费次数',
  dataIndex: 'searchImageGratisTimes',
  sorter: false,
  width: '10%'
}, {
  title: '搜图每次收费',
  dataIndex: 'searchFeePerTime',
  sorter: false,
  width: '10%'
}, {
  title: '图库列表每月免费页数',
  dataIndex: 'imageStoreListGratisTimes',
  sorter: false,
  width: '10%'
}, {
  title: '图库列表每页收费',
  dataIndex: 'imageStoreListFeePerTime',
  sorter: false,
  width: '10%'
}, {
  sorter: true,
  title: '创建时间',
  dataIndex: 'createTime'
}, {
  title: '是否禁用',
  dataIndex: 'disabled',
  width: '6%',
  customRender: (text, record, index) => {
    return record.disabled ? 'yes' : 'no'
  }
}, {
  title: 'operation',
  dataIndex: '',
  scopedSlots: { customRender: 'operation' }
}]

export default {
  components: {
    productAdd, productResource
  },
  mounted () {
    this.fetch({
      size: this.pagination.pageSize,
      page: this.pagination.current
    })
  },
  data () {
    return {
      data: [],
      pagination: {
        pageSize: 5,
        current: 1
      },
      selectedRowKeys: [],
      loading: false,
      columns,
      page: {},

      title: '',
      visible: false,
      visibleForResource: false,
      record: {}
    }
  },
  methods: {
    onAdd () {
      this.title = '添加产品'
      this.visible = true
      this.record = {}
    },
    onDelete (id) {
      const _this = this
      this.$confirm({
        title: '友情提示',
        content: '要删除这个产品吗',
        onOk () {
          return new Promise((resolve, reject) => {
            serv.delete(id).then(res => {
              if (res.data.code === 0) {
                const dataSource = [..._this.data]
                _this.data = dataSource.filter(item => item.id !== id)
                resolve()
              } else {
                resolve()
                _this.$message.error(res.data.msg)
              }
            })
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel () {}
      })
    },
    onEdit (record) {
      this.title = '编辑产品'
      this.visible = true
      this.record = record
    },
    onDels () {
    },
    onRefresh () {
      this.pagination.current = 1
      this.fetch({
        size: this.pagination.pageSize,
        page: this.pagination.current
      })
    },
    handleOk (id) {
      let pageNum = id ? this.pagination.current : 1
      this.visible = false
      this.record = {}
      this.fetch({
        size: this.pagination.pageSize,
        page: pageNum
      })
    },
    handleCancel (e) {
      this.visible = false
      this.record = {}
    },
    onProductResource (record) {
      this.visibleForResource = true
      this.record = record
    },
    handleOkForResource () {
      this.visibleForResource = false
      this.record = {}
    },
    handleCancelForResource (e) {
      this.visibleForResource = false
      this.record = {}
    },
    onSearchNameZn (value) {
      this.pagination.current = 1
      this.fetch({
        size: this.pagination.pageSize,
        page: this.pagination.current,
        name: value
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      let params = {
        size: pagination.pageSize,
        page: pagination.current,
        ...filters
      }
      if (sorter.field) {
        params.sort = `${sorter.field},${sorter.order === 'ascend' ? 'asc' : 'desc'}`
      }
      this.fetch(params)
    },
    async fetch (params = {}) {
      this.loading = true
      if (!params.sort) params.sort = `createTime,desc`
      this.page = await serv.getPage(params)
      const pagination = { ...this.pagination }
      pagination.total = this.page.totalElements
      // pagination.current = this.page.pageable.pageNumber + 1
      // console.log(this.pagination)
      this.loading = false
      this.selectedRowKeys = []
      this.data = this.page.content
      this.pagination = pagination
    }
  }
}
</script>

<style scoped>
.root-table {
  height: 100%;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
</style>
